<template>
  <div>
    <div class="container">
      <el-row>
        <el-col :span="20">
          <el-input
            style="width:200px;"
            size="small"
            placeholder="商品名称/货号"
            v-model="searchStr"
            class="input-with-select"
          >
            <el-button
              @click="search"
              slot="append"
              icon="el-icon-search"
            ></el-button>
          </el-input>
          <el-date-picker
            v-model="timeRange"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            size="small"
          >
          </el-date-picker>
        </el-col>
        <el-col style="text-align:right;" :span="4">
          <!-- <el-button size="small" type="primary">导出</el-button> -->
        </el-col>
      </el-row>
      <el-table
        ref="multipleTable"
        :data="commentList"
        style="width: 100%;margin-top:5px;"
        :height="tableHeight"
        border
        stripe
      >
        <el-table-column label="货号" prop="item_no" width="200">
        </el-table-column>
        <el-table-column label="用户" prop="nickname"> </el-table-column>
        <el-table-column label="商品" align="center" width="300">
          <template slot-scope="scope">
            <img style="width:50px;he" :src="scope.row.img_show" alt="" />
            <div>{{ scope.row.name }}</div>
          </template>
        </el-table-column>
        <el-table-column label="评论内容" align="center" width="100">
          <template slot-scope="scope">
            <el-button
              @click="
                detailVisible = true;
                currentComment = scope.row;
              "
              type="text"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="评论时间"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              @click="
                replyVisible = true;
                currentComment = scope.row;
              "
              type="primary"
              size="small"
              >回复</el-button
            >
            <el-button @click="showComment(scope)" size="small">{{
              scope.row.is_conceal === 1 ? "显示" : "隐藏"
            }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-bottom-bar">
        <div></div>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-size="size"
          layout="total, prev, pager, next"
          :total="total"
          :background="true"
        >
        </el-pagination>
      </div>
    </div>
    <comment-detail
      :visible="detailVisible"
      @close="
        detailVisible = false;
        currentComment = {};
      "
      :comment="currentComment"
    ></comment-detail>
    <comment-reply
      :visible="replyVisible"
      @close="
        replyVisible = false;
        getCommentList(page);
      "
      :comment="currentComment"
    >
    </comment-reply>
  </div>
</template>

<script>
import commentDetail from "./component/comment-detail";
import commentReply from "./component/comment-reply";
import { getCommentList, showComment } from "@/api/good-mng";
export default {
  name: "CommentMng",
  data() {
    return {
      commentList: [],
      searchStr: "",
      total: 0,
      size: 0,
      page: 1,
      tableHeight: 0,
      detailVisible: false,
      replyVisible: false,
      currentComment: {},
      timeRange: []
    };
  },
  watch: {
    timeRange: function(val) {
      this.getCommentList(1);
    }
  },
  methods: {
    showComment(scope) {
      showComment({
        id: scope.row.id,
        conceal: scope.row.is_conceal == 1 ? 0 : 1
      }).then(res => {
        if (res.code === 200) {
          this.commentList[scope.$index].is_conceal =
            res.data.conceal == 1 ? 1 : 0;
          this.$message({
            message: res.data.conceal == 1 ? "隐藏成功" : "显示成功",
            type: "success"
          });
        }
      });
    },
    search() {
      this.getCommentList(1);
    },
    getCommentList(page) {
      getCommentList({
        page,
        condition: this.searchStr ? this.searchStr : null,
        start_time: this.timeRange && this.timeRange.length ? this.timeRange[0] : null,
        end_time: this.timeRange && this.timeRange.length ? this.timeRange[1] : null
      }).then(res => {
        if (res.code === 200) {
          this.commentList = res.data.data;
          this.total = res.data.total;
          this.page = res.data.current_page;
          this.size = res.data.per_page;
        }
      });
    },
    handleCurrentChange(page) {
      this.getCommentList(page);
    },
    changeSize() {
      this.tableHeight = document.body.clientHeight - 180;
      window.onresize = () => {
        this.changeSize();
      };
    }
  },
  created() {
    this.getCommentList(1);
    this.changeSize();
  },
  components: {
    commentDetail,
    commentReply
  }
};
</script>

<style>
</style>
